<template>
    <v-dialog-layout
        v-model:visible="visible"
        width="900px"
        @confirm="formAdd.onSubmit()"
        @cancel="cancel"
    >
        <v-form-layout
            ref="formAdd"
            v-model:form-data="formState"
            :rules="rules"
            @validateSuccess="validateSuccess"
            @validateError="validateError"
        >
            <a-row gutter="40">
                <a-col :span="12">
                    <a-form-item ref="name" label="Activity name" name="name">
                        <a-input v-model:value="formState.name"></a-input>
                    </a-form-item>
                </a-col>
                <a-col :span="12">
                    <a-form-item label="Activity zone" name="region">
                        <a-select
                            v-model:value="formState.region"
                            placeholder="please select your zone"
                        >
                            <a-select-option value="shanghai">Zone one</a-select-option>
                            <a-select-option value="beijing">Zone two</a-select-option>
                        </a-select>
                    </a-form-item>
                </a-col>
            </a-row>
            <a-row gutter="40">
                <a-col :span="12">
                    <a-form-item label="Activity time" required name="date1">
                        <a-date-picker
                            v-model:value="formState.date1"
                            show-time
                            type="date"
                            placeholder="Pick a date"
                        />
                    </a-form-item>
                </a-col>
                <a-col :span="12">
                    <a-form-item label="Instant delivery" name="delivery">
                        <a-switch v-model:checked="formState.delivery" />
                    </a-form-item>
                </a-col>
            </a-row>

            <a-row gutter="40">
                <a-col :span="12">
                    <a-form-item label="Activity type" name="type">
                        <a-checkbox-group v-model:value="formState.type">
                            <a-checkbox value="1" name="type">Online</a-checkbox>
                            <a-checkbox value="2" name="type">Promotion</a-checkbox>
                            <a-checkbox value="3" name="type">Offline</a-checkbox>
                        </a-checkbox-group>
                    </a-form-item>
                </a-col>
                <a-col :span="12">
                    <a-form-item label="Resources" name="resource">
                        <a-radio-group v-model:value="formState.resource">
                            <a-radio value="1">Sponsor</a-radio>
                            <a-radio value="2">Venue</a-radio>
                        </a-radio-group>
                    </a-form-item>
                </a-col>
            </a-row>
            <a-row gutter="40">
                <a-col :span="12">
                    <a-form-item label="Activity form" name="desc">
                        <a-textarea v-model:value="formState.desc" />
                    </a-form-item>
                </a-col>
            </a-row>
        </v-form-layout>
    </v-dialog-layout>
</template>

<script setup lang="ts">
import { addRules } from './config'
import { reactive, ref } from 'vue'
import { message } from 'ant-design-vue'

const props = withDefaults(defineProps<{ visible: boolean }>(), {
    visible: false
})
const emit = defineEmits(['update:visible'])

let formAdd = ref();
const formState = reactive({
    name: '',
    region: undefined,
    date1: undefined,
    delivery: false,
    type: [],
    resource: '',
    desc: ''
});
const rules = addRules

const validateSuccess = () => {
    message.success('校验成功')
    emit('update:visible', false)
};

const validateError = () => {
    message.error('校验失败')
};

const cancel = () => {
    emit('update:visible', false)
};
</script>

<style lang="scss" scoped>
</style>